<template>
  <div class="contents">
    <span class="back" @click="goBack">返回上一页</span>
    <!-- 一楼 -->
    <div class="f1" v-if="projectMessage" v-loading="loading">
      <div class="title">
        <p>{{ projectMessage.putoutid }}</p>
        <h5
          :class="{
            tg: projectMessage.status == '审批中',
            tg: projectMessage.status == '已放款',
            tg: projectMessage.status == '已还款',
            jj: projectMessage.status == '已逾期',
            tg: projectMessage.status == '正常结清',
            jj: projectMessage.status == '逾期结清',
            jj: projectMessage.status == '审批拒绝',
            jj: projectMessage.status == '放款拒绝'
          }"
        >
          {{ projectMessage.status }}
        </h5>
      </div>
      <!-- 产品信息 -->
      <div class="details-item" v-if="projectMessage">
        <div class="details-item-left">
          <ul>
            <li>产品名称：</li>
            <li>申请日期：</li>
            <li>放款日期：</li>
            <li>利率（%）：</li>
          </ul>
          <div>
            <p>{{ projectMessage.productname }}</p>
            <p>{{ projectMessage.applydate | getDate }}</p>
            <p>{{ projectMessage.loandate | getDate }}</p>
            <p>{{ projectMessage.radio | getArea }}</p>
          </div>
        </div>
        <div class="details-item-left">
          <ul>
            <li>金融机构：</li>
            <li>授信订单编号：</li>
            <li>放款金额（元）：</li>
            <li>到期日：</li>
          </ul>
          <div>
            <p>{{ projectMessage.funder | getData }}</p>
            <p
              style="text-decoration: underline; cursor: pointer; color: #3f6ef2"
              @click="goDetails(projectMessage)"
            >
              {{ projectMessage.applyid }}
            </p>
            <p>{{ projectMessage.loanamount | getArea }}</p>
            <p>{{ projectMessage.enddate | getDate }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 二楼 -->
    <div class="f2" v-loading="loading">
      <div class="title">
        <h3 :class="{ active: row == 1 }" @click="row = 1">申请信息</h3>
        <h3 :class="{ active: row == 3 }" @click="row = 3">应收账款确认信息</h3>
        <h3 :class="{ active: row == 4 }" @click="row = 4">放款信息</h3>
        <h3 :class="{ active: row == 2 }" @click="row = 2">还款信息</h3>
      </div>
      <!-- 申请信息 -->
      <div v-show="row == 1">
        <div class="titles">
          <h1></h1>
          <h3>应收账款信息</h3>
        </div>
        <div class="details-item" v-if="applyMessage">
          <div class="details-item-left">
            <ul>
              <li>合同编号：</li>
              <li>发票号码：</li>
              <li>应收账款金额（元）：</li>
            </ul>
            <div>
              <p>{{ applyMessage.contractno | getDate }}</p>
              <p>{{ applyMessage.billno | getData }}</p>
              <p>{{ applyMessage.payamount | getArea }}</p>
            </div>
          </div>
          <div class="details-item-left">
            <ul>
              <li>合同名称：</li>
              <li>发票代码：</li>
              <li>付款日期：</li>
            </ul>
            <div>
              <p>{{ applyMessage.contractname }}</p>
              <p>{{ applyMessage.billcode | getData }}</p>
              <p>{{ applyMessage.paydate | getDate }}</p>
            </div>
          </div>
        </div>
        <div class="titles">
          <h1></h1>
          <h3>附件</h3>
        </div>
        <el-table
          style="margin-top: 0.2344rem"
          :data="fileList"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column label="序号" min-width="8%" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="文件名称" align="center" min-width="25%">
          </el-table-column>
          <el-table-column prop="inputtime" label="上传日期" align="center" min-width="25%">
            <template slot-scope="scope">
              <span>{{ fileList[scope.$index].inputtime | getDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            min-width="10%"
          >
            <template slot-scope="scope">
              <span class="span" @click="examine(scope.$index, fileList)">查看</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="titles">
          <h1></h1>
          <h3>账户信息</h3>
        </div>
        <div class="details-item" v-if="applyMessage">
          <div class="details-item-left">
            <ul>
              <li>户名：</li>
              <li>开户行：</li>
            </ul>
            <div>
              <p>{{ applyMessage.acctname | getDate }}</p>
              <p>{{ applyMessage.bank | getData }}</p>
            </div>
          </div>
          <div class="details-item-left">
            <ul>
              <li>账号：</li>
            </ul>
            <div>
              <p>{{ applyMessage.acctno | getData }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 用款申请 -->
      <div class="HKMessage" v-show="row == 2">
        <!-- 空状态 -->
        <div class="null" v-if="!busapplypayment">
          <img src="@/assets/shangpiao/暂无记录.png" alt="" />
          <h5>暂无还款记录</h5>
        </div>
        <div class="details" v-else>
          <!-- <div class="titles">
            <h1></h1>
            <h3>还款详情</h3>
          </div> -->
          <el-table
            style="margin-top: 0.2344rem"
            :data="busapplypayment"
            border
            highlight-current-row
            stripe
            :header-cell-style="{
              background: '#F1F5FF',
              color: '#4D4D4D'
            }"
          >
            >
            <el-table-column prop="paydate" label="还款时间" min-width="4%" align="center">
              <template slot-scope="scope">
                {{ scope.row.paydate | getDate }}
              </template>
            </el-table-column>
            <el-table-column prop="payamoutn" label="还款金额（元）" min-width="4%" align="center">
              <template slot-scope="scope">
                {{ scope.row.payamoutn | getArea }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="还款状态" min-width="4%" align="center">
              <template slot-scope="scope">
                {{ scope.row.status | getStatu }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 应收账款确认信息 -->
      <div class="HKMessage" v-show="row == 3">
        <el-table
          style="margin-top: 0.2344rem"
          :data="Putoutfile"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column label="序号" min-width="8%" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="oldfilename" label="文件名称" align="center" min-width="25%">
            <template slot-scope="scope">
              <span>{{ Putoutfile[scope.$index].objecttype | getName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="inputtime" label="上传日期" align="center" min-width="25%">
            <template slot-scope="scope">
              <span>{{ Putoutfile[scope.$index].inputtime | getDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            min-width="10%"
          >
            <template slot-scope="scope">
              <span class="span" @click="examine(scope.$index, Putoutfile)">查看</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 放款信息 -->
      <div class="HKMessage" v-show="row == 4">
        <div class="details-item" v-if="businessPutout">
          <div class="details-item-left">
            <ul>
              <li>放款日期：</li>
              <li>放款期限（月）：</li>
            </ul>
            <div>
              <p>{{ businessPutout.loandate | getDate }}</p>
              <p>{{ businessPutout.termmonth | getData }}</p>
            </div>
          </div>
          <div class="details-item-left">
            <ul>
              <li>放款金额（元）：</li>
              <li>到期日：</li>
            </ul>
            <div>
              <p>{{ businessPutout.businesssum | getArea }}</p>
              <p>{{ businessPutout.loanenddate | getDate }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from '@/utils'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      loading: false,
      row: 1,
      id: '', //项目id
      status: '', //项目状态
      projectMessage: null, // 产品信息
      applyMessage: null, // 用款信息
      busapplypayment: null, //还款信息
      fileList: [
        {
          number: 1,
          name: '合同'
        },
        {
          number: 2,
          name: '发票'
        },
        {
          number: 3,
          name: '结算清单'
        }
      ], //附件
      Putoutfile: null, //应收账款确认信息
      businessPutout: null //放款信息
    }
  },
  // 计算属性
  computed: {
    ...mapState(['shangLianApplyParameter'])
  },
  mounted() {
    // 获取地址栏中的id
    this.id = localStorage.getItem('SLPutoutid')
    this.status = localStorage.getItem('SLStatus')
    this.getFindbuspotout()
    this.getBusapplyputouts()
    this.busapply()
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '-'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getName: function (val) {
      if (val == 'ConfirmedAccDetail') return '应收账款确认凭证'
      if (val == 'PaymentUndertaking') return '付款承诺函'
    },
    getDate: function (value) {
      if (!value) return '-'
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (!value) return '-'
      return value
    },
    getStatu: function (value) {
      if (!value) return '-'
      if (value == '399') return '已逾期'
      if (value == '400') return '已还款'
    }
  },
  methods: {
    // 查看
    examine(index, data) {
      let val = data[index]
      let name = data[index].oldfilename.split('.')[1]
      let imgUrlStr = val.filepath
      if (name == 'jpg' || name == 'png') {
        const a = document.createElement('a') // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute('target', '_blank')
        a.href = imgUrlStr
        a.click()
      } else {
        fetch(imgUrlStr).then(res =>
          res.blob().then(blob => {
            const a = document.createElement('a'), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = val.oldfilename
            a.href = url
            a.download = filename
            a.click()
            window.URL.revokeObjectURL(url)
          })
        )
      }
    },
    // 跳转至授信详情
    // 我的授信 点击查看跳转项目详情
    goDetails(item1) {
      let productcode = localStorage.getItem('productcode')
      let id = item1.applyid
      this.$store.commit('updataSLApplyid', id)
      // if (
      //   productcode == 'SCF003001' ||
      //   productcode == 'SCF003002' ||
      //   productcode == 'SCF013001' ||
      //   productcode == 'SCF012002' ||
      //   productcode == 'SCF012003'
      // ) {
      this.$router.push(`/projectGongHuoDaiTG`)
      //   return
      // }
      // this.$router.push(`/projectSjghdDetails`)
    },
    // 还款信息
    async busapply() {
      let url = '/api/pros/busapplypayment2'
      let params = {
        putoutid: this.id
      }
      let res = await myPostFetch(url, params)
      this.busapplypayment = res.data
    },
    // 我的用信项目详情最上面
    async getFindbuspotout() {
      this.loading = true
      let url = '/api/pros/findputoutGC'
      let params = {
        putoutid: this.id
      }
      let res = await myPostFetch(url, params)
      this.projectMessage = res.data
      this.loading = false
    },
    // 我的用信项目详情最下面 用款信息
    async getBusapplyputouts() {
      let url = '/api/pros/findputoutFKFile'
      let params = {
        putoutid: this.id
      }
      let res = await myPostFetch(url, params)
      this.applyMessage = res.data.accountDetail //用款信息
      // this.fileList = res.data.detailfile //附件
      this.Putoutfile = res.data.Putoutfile //应收账款确认信息
      this.businessPutout = res.data.businessPutout //放款信息
      // 附件
      res.data.detailfile.forEach(item => {
        if (item.objecttype == 'BusinessContract') {
          this.fileList[0].filepath = item.filepath
          this.fileList[0].oldfilename = item.oldfilename
          this.$set(this.fileList[0], 'inputtime', item.inputtime)
        } else if (item.objecttype == 'BusinessInvoice') {
          this.fileList[1].filepath = item.filepath
          this.$set(this.fileList[1], 'inputtime', item.inputtime)
          this.fileList[1].oldfilename = item.oldfilename
        } else if (item.objecttype == 'BusinessSettlement') {
          this.fileList[2].filepath = item.filepath
          this.$set(this.fileList[2], 'inputtime', item.inputtime)
          this.fileList[2].oldfilename = item.oldfilename
        }
      })
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.contents {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: rgb(242, 244, 247);
  // 返回上一页
  .back {
    position: absolute;
    left: 30vw;
    top: 0.599rem;
    font-size: 0.0833rem;
    color: #3f6ef2;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 0.3958rem;
    font-size: 0.0833rem;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 0.0521rem 0 0.0208rem;
    }
    .span {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 0.0938rem;
      height: 0.0938rem;
      margin-right: 0.026rem;
    }
  }

  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0.0052rem 0.0521rem 0px rgba(196, 196, 196, 0.15);
    border-radius: 0.0313rem;
    margin-bottom: 0.0521rem;
    padding: 0.1563rem 0.2604rem;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.125rem;
      p {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #000;
      }
      h5 {
        box-sizing: border-box;
        padding: 1px 4px;
        background: #3cb0ff;
        border-radius: 0.0104rem;
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 0.0938rem;
        margin-left: 0.0417rem;
        &.tg {
          background: #3f6ef2;
        }
        &.jj {
          background: #ff6060;
        }
      }
      span {
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          display: none;
        }
        font-size: 0.0677rem;
        margin-left: 0.2604rem;
        i,
        a {
          color: #3f6ef2;
          text-decoration: underline;
          cursor: pointer;
        }
        .nactive {
          font-size: 0.0729rem;
          margin-right: 0.026rem;
          color: #9999 !important;
        }
      }
    }
    // <!-- 产品详细信息开始 -->
    // 基本信息
    .details-item {
      display: flex;
      .details-item-left {
        display: flex;
        width: 100%;
        height: 100%;
        ul {
          width: 0.9rem;
          height: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          li {
            margin-top: 0.1042rem;
            height: 0.1563rem;
            background-color: #fff;
          }
        }
        div {
          // width: 0.7031rem;
          height: 100%;
          margin-left: 0.0781rem;
          z-index: 99;
          p {
            height: 0.1563rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            margin-top: 0.1042rem;
          }
        }
      }
    }
  }
  .f2 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.0313rem;
    padding: 0 0.2604rem;
    padding-bottom: 0.1823rem;
    scroll-behavior: smooth;
    overflow: auto;
    h2 {
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #000000;
      margin: 0.151rem 0 0.0521rem 0;
    }
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.1823rem;
      margin-top: 0.1302rem;
      margin-bottom: 0.1302rem;
      h3 {
        height: 0.1667rem;
        // width: 0.3906rem;
        line-height: 0.1458rem;
        text-align: center;
        box-sizing: border-box;
        margin-right: 0.1823rem;
        font-family: Source Han Sans SC;
        color: #838383;
        font-size: 0.0938rem;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        &.active {
          box-sizing: border-box;
          border-bottom: 2px solid #3f6ef2;
          color: #3f6ef2;
        }
      }
    }
    .titles {
      display: flex;
      align-items: center;
      margin-top: 0.1563rem;
      h1 {
        height: 0.1042rem;
        width: 0.0313rem;
        background-color: #e8903c;
      }
      h3 {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #e8903c;
        margin-left: 0.0625rem;
      }
    }
    // 基本信息
    .details-item {
      margin-top: 0.1042rem;
      display: flex;
      .details-item-left {
        display: flex;
        width: 100%;
        height: 100%;
        ul {
          width: 0.9rem;
          height: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          li {
            margin-top: 0.1042rem;
            height: 0.1563rem;
            background-color: #fff;
          }
        }
        div {
          // width: 0.7031rem;
          height: 100%;
          margin-left: 0.0781rem;
          z-index: 99;
          p {
            height: 0.1563rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            margin-top: 0.1042rem;
          }
        }
      }
    }
    // 用款信息
    .details-itemYK {
      display: flex;
      margin: 0.0521rem 0.0781rem;
      // 空状态
      .null {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 0.5208rem;
        p {
          font-size: 0.0833rem;
          color: #b3b3b3;
        }
        img {
          width: 1.6979rem;
        }
      }
      .details-item-left {
        width: 100%;
      }
    }
    // 表格编辑/查看
    .span {
      display: inline-block;
      width: 0.1563rem;
      height: 0.125rem;
      font-size: 0.0781rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #3f6ef2;
      border-bottom: 1px solid #3f6ef2;
      cursor: pointer;
    }
    .HKMessage {
      box-sizing: border-box;
      margin-top: 20px;
      width: 100%;
      // height: 2.3438rem;
      .null {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        h5 {
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #b3b3b3;
        }
        .btn {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.5208rem;
          height: 0.1823rem;
          font-size: 0.0833rem;
          color: #fff;
          border-radius: 0.0156rem;
          background-color: #3f6ef2;
          margin-top: 0.2083rem;
        }
        img {
          width: 1.6979rem;
        }
      }
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }

  // 弹出框
  .dialog-center {
    display: flex;
    justify-content: space-around;
    width: 100%;
    ul {
      // background-color: #f00;
      li {
        height: 0.2604rem;
        display: flex;
        // justify-content: center;
        .message {
          margin-top: -0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 45%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 0.6302rem;
      height: 0.1615rem;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 0.0208rem;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
    }
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 0.0781rem;
    .file {
      font-size: 0.0781rem;
      margin-right: 0.0521rem;
      color: #3f6ef2;
      text-decoration: underline;
      cursor: pointer;
    }
    .file1 {
      color: #999;
    }
  }
}
::v-deep .el-dialog--center {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 50%;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 50%;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 40%;
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.25rem;
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
}
::v-deep .enterpriseName .el-input__inner {
  width: 1.25rem;
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
  .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 85px);

    &::-webkit-scrollbar {
      width: 0; /* 纵向滚动条 宽度 */
      height: 0.0781rem; /* 横向滚动条 高度 */
    }
    &::-webkit-scrollbar-thumb {
      width: 0.0521rem; /* 横向滚动条 宽度 */
      height: 0.0781rem; /* 纵向滚动条 高度 */
      background-color: rgb(167, 164, 164);
    }
  }
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
.el-table tr {
  height: 40px;
}
.el-table thead {
  height: 40px;
}
.el-button--small {
  padding: 0;
}

/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 25px 0 30px;
}
.el-form-item__label {
  padding-right: 6px !important;
}
</style>
